<template>
    <el-row style="background-color: #f4f5f5;">
        <!-- <el-col :span="22"> -->
        <el-col :xs="18" :sm="18" :md="22" :lg="22" :xl="22">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item :index="index + ''" v-for="(item, index) in tags" :key="index">
                    <template #title>
                        {{ item['title'] }}
                    </template>
                </el-menu-item>
            </el-menu>
        </el-col>
        <el-col :span="2">
            <el-button type="primary" style="height: 100%;" @click="() => { showMoreTag = true }">设置更多</el-button>

            <el-dialog v-model="showMoreTag" title="修改兴趣" width="70%">
                <TagMore></TagMore>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="showMoreTag = false">取消</el-button>
                        <el-button type="primary" @click="showMoreTag = false">确认</el-button>
                    </span>
                </template>
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { apiGetTags } from '@/api/index';
import TagMore from './TagMore.vue';
const tags: any = reactive([{
    "url": "",
    "title": "C语言"
},
{
    "url": "",
    "title": "Python"
},
{
    "url": "",
    "title": "前端设计"
},
{
    "url": "",
    "title": "JAVA后端"
},
{
    "url": "",
    "title": "大数据与人工智能"
},
{
    "url": "",
    "title": "程序设计基础"
},
{
    "url": "",
    "title": "408计算机"
},
{
    "url": "",
    "title": "软件工程"
},
{
    "url": "",
    "title": "Mysql"
},
{
    "url": "",
    "title": "Redis"
},
{
    "url": "",
    "title": "嵌入式软件开发"
},
{
    "url": "",
    "title": "计算机应用基础"
},
])
const showMoreTag = ref(false);
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

onMounted(() => {
    // 读取标签数据
    apiGetTags().then(res => {
        // console.log(res);
        tags.push(...res.data);

    });

});


</script>